<script setup>
  const props=defineProps(['items'])
  let item=props.items;
</script>

<template>
  <div class="conversation">
    <div class="left">
      <div class="ico">
        <img src="/src/assets/logo.png">
      </div>
    </div>
    <div class="right">
      <div class="content">
        <h1>{{item.message}}</h1>
      </div>
    </div>
  </div>
</template>

<style scoped>
.conversation {
  height: auto;
  width: 48vw;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content:left;
}
.conversation .left{
  width: 1.8vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
}
.conversation .left .ico{
  width: 1.8vw;
  height: 1.8vw;
  margin-top: 0.8vh;
}
.conversation .left .ico img{
  width: 1.8vw;
  height: 1.8vw;
  border-radius: 0.5vw;
}
.conversation .right{
  width: 47vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.conversation .right .content {
  background-color: #fff;
  max-width: 47vw;
  min-width: 47vw;
  height: auto;
  font-size: 0.8vw;
  margin-left: 0.8vw;
  padding: 0.5vw;
  border-radius: 0.8vw;
  border: #000 0.5px solid;
}
.conversation .right .content h1{
  font-size: 0.8vw;
}
</style>